<template>
  <div class="allocMenu_container">
    <!-- 28.18使用 element-plus 的 Tree 树形控件 -->
    <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /> -->
    <!-- 28.25定义 props, show-checkbox 是显示多选框，node-key    -->
    <!-- <el-tree ref="treeRef" lazy :data="menuList" :props="defaultProps" show-checkbox node-key="id" /> -->
    <!-- 28.28定义 :default-checked-keys 默认选中，:default-expanded-keys -->
    <!-- <el-tree :data="menuList" :props="defaultProps" show-checkbox node-key="id" :default-checked-keys="ids"
      :default-expanded-keys="expandIds" /> -->
    <!-- 28.45使用ref获取到当前的组件实例 -->
    <el-tree ref="treeRef" :data="menuList" :props="defaultProps" show-checkbox node-key="id" :default-checked-keys="ids"
      :default-expanded-keys="expandIds" />
      
    <!-- 28.36绑定点击的保存事件 -->
    <div class="button_btns">
      <el-button type="primary" @click="submitFn">保存</el-button>
      <el-button>清空</el-button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router';
import { ApiGetAllMenu, ApiGetRoleListMenu, ApiallocChangeMenu } from '@/http/api'
import { computed, ref } from 'vue';
// @ts-ignore
import { ElTree, ElMessage } from 'element-plus'

// 二十八、分配菜单
// 28.1发送接口,/menu/treeList,树形结构返回所有菜单列表
// 28.2发送接口,/role/listMenu/{roleId},获取角色相关菜单
// 28.3去到 http 文件夹里面 api.ts 文件

// 28.7获取当前路由的信息
const route = useRoute()
const router = useRouter()

// 28.46获取组件实例
// const treeRef = ref<any>(null)
// 28.53在element-plus里面，没有为 ElTree 生成对应的类型，所以现在采用的是 InstanceType 这个泛型操作（类型体操）， 用来返回某个实例的类型
const treeRef = ref<InstanceType<typeof ElTree>>()

// 28.8可以判断一下,有没有id,如果没有id,跳转回原来的页面
// if()

// 28.9一开始进入到页面,需要做两件事
// 28.10展示所有的菜单数据
// 28.11把当前这个用户的旧的下单数据渲染出来

// 28.26定义 defaultProps
const defaultProps = {
  children: 'children',
  // 28.27表头
  label: 'title'
}

// 28.18定义一个响应式数据，存获取的所有菜单列表list
const menuList = ref<IMenuModelWithChildren[]>([])

// 28.12调用接口
// ApiGetAllMenu()
// 28.19请求接口数据
ApiGetAllMenu().then(res => {
  if (res.code === 200) {
    // 28.20将后端返回的 list 赋值 menuList
    menuList.value = res.data;
    console.log(menuList.value)
  }
})

// 28.35将父级的id也存起来
const expandIds = computed(() => {
  return menuList.value.map(item => item.id)
})

// 28.21定义一个响应式数据，存获取角色相关菜单
const roleMenu = ref<IMenuModel[]>([])

// 28.29获取默认勾选的 id 的方法1：
// 28.30定义 ids 为一个空的数组
// const ids = []

// 28.13这个获取角色相关菜单的接口,需要传个 roleId 进去
// 28.14去到 types 文件夹里面的 api.d.ts
// ApiGetRoleListMenu(route.query.id as any as number)
// 28.22请求接口数据
ApiGetRoleListMenu(route.query.id as any as number).then(res => {
  // 28.23如果请求成功
  if (res.code === 200) {
    // 28.24将后端返回数据赋值给 roleMenu
    roleMenu.value = res.data;

    // 28.31然后遍历筛选出 id
    // ids = res.data.map(item => item.id)
  }
})

// 28.32获取默认勾选 id 的方法二：
// 28.33使用 computed 计算属性
const ids = computed(() => {
  // 28.34将 id 筛选返回出去
  return roleMenu.value.map(item => item.id)
})

// 28.37点击保存的时候需要发送请求
const submitFn = () => {
  // 28.48定义一定会有这个值
  // if (treeRef.value) {
  // 28.47选中的方法
  // let checked = treeRef.value.getCheckedNodes()
  // 28.49获取是约束必须是有的 ! 加上感叹号
  // let checked = treeRef.value!.getCheckedNodes()
  // 这里找不到item 的类型，所以我们约束类型为数组就好了
  let checked: IMenuModelWithChildren[] = treeRef.value!.getCheckedNodes()
  // console.log(checked)
  // 28.50找出对应的ids
  let menuIds = checked.map(item => item.id)



  // 28.51发送请求
  // console.log(ids.value)
  ApiallocChangeMenu({
    // 28.52将 roleId 和 menuIds 带上
    roleId: route.query.id as any as number,
    menuIds
  }).then(res => {
    // 28.54判断是否成功，如果成功
    if (res.code === 200) {

      // 28.55提示
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
      // 28.56跳转
      router.push('/ums/role')
    }
  })
}
</script>
<style lang="less" scoped>
.allocMenu_container {
  .button_btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
}
</style>